import React, { memo } from 'react';
import { Row, Col, Icon, Tooltip } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import styles from './Home.less';
import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
import Trend from '@/components/Trend';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 20 },
};

const IntroduceRow = memo(({ loading, visitData }) => (
  <Row gutter={2}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={<FormattedMessage id="app.home.number-visits-yesterday" defaultMessage="Visits" />}
        action={
          <Tooltip
            title={<FormattedMessage id="app.home.introduce" defaultMessage="Introduce" />}
          >
            <img src={require('../../assets/icons/1.png')}  alt='' />
          </Tooltip>
        }
        total={visitData.visitorTup.yesterday}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag={visitData.visitorTup.type} style={{ marginRight: 16 }}>
              {visitData.visitorTup.type === 'up' ? <FormattedMessage id="app.home.up" defaultMessage="Weekly Changes" />:<FormattedMessage id="app.home.down" defaultMessage="Weekly Changes" />}
              <span className={styles.trendText}>{visitData.visitorTup.value}%</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <MiniArea color="#975FE4" data={visitData.visitorTup.visitorData} />
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title={<FormattedMessage id="app.home.number-asked-yesterday" defaultMessage="Payments" />}
        action={
          <Tooltip
            title={<FormattedMessage id="app.home.introduce" defaultMessage="Introduce" />}
          >
            <img src={require('../../assets/icons/2.png')}  alt='' />
          </Tooltip>
        }
        total={visitData.chatCountTup.yesterday}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag={visitData.chatCountTup.type} style={{ marginRight: 16 }}>
              {visitData.chatCountTup.type === 'up' ? <FormattedMessage id="app.home.up" defaultMessage="Weekly Changes" />:<FormattedMessage id="app.home.down" defaultMessage="Weekly Changes" />}
              <span className={styles.trendText}>{visitData.chatCountTup.value}%</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <MiniBar data={visitData.chatCountTup.chatCountData} />
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title={
          <FormattedMessage
            id="app.home.match-Rate-yesterday"
            defaultMessage="Operational Effect"
          />
        }
        action={
          <Tooltip
            title={<FormattedMessage id="app.home.introduce" defaultMessage="Introduce" />}
          >
            <img src={require('../../assets/icons/3.png')}  alt='' />
          </Tooltip>
        }
        total={visitData.matchRateTup.yesterday+"%"}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag={visitData.matchRateTup.type} style={{ marginRight: 16 }}>
              {visitData.matchRateTup.type === 'up' ? <FormattedMessage id="app.home.up" defaultMessage="Weekly Changes" />:<FormattedMessage id="app.home.down" defaultMessage="Weekly Changes" />}
              <span className={styles.trendText}>{visitData.matchRateTup.value+"%"}</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <MiniProgress
          percent={visitData.matchRateTup.yesterday}
          strokeWidth={8}
          target={visitData.matchRateTup.yesterday}
          targetLabel={`${formatMessage({ id: 'app.home.day-before-yesterday' }).concat( ': ')}${visitData.matchRateTup.yesterday+"%"}`}
          color="#13C2C2"
        />
      </ChartCard>
    </Col>

    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title={<FormattedMessage id="app.home.number-unknown-questions-yesterday" defaultMessage="Total Sales" />}
        action={
          <Tooltip
            title={<FormattedMessage id="app.home.introduce" defaultMessage="Introduce" />}
          >
            <img src={require('../../assets/icons/4.png')}  alt='' />
          </Tooltip>
        }
        loading={loading}
        total={visitData.unknownCountTup.yesterday}
        footer={
          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
            <Trend flag={visitData.unknownCountTup.type} style={{ marginRight: 16 }}>
              {visitData.unknownCountTup.type === 'up' ? <FormattedMessage id="app.home.up" defaultMessage="Weekly Changes" />:<FormattedMessage id="app.home.down" defaultMessage="Weekly Changes" />}
              <span className={styles.trendText}>{visitData.unknownCountTup.value}%</span>
            </Trend>
          </div>
        }
        contentHeight={46}
      >
        <MiniArea line height={45} data={visitData.unknownCountTup.unknownCountData} />
      </ChartCard>
    </Col>
  </Row>
));

export default IntroduceRow;
